<template>
  <div class="track_the_playback">
    <div class="container" style="padding: 0px">
      <!-- 地图 -->
      <div id="map"></div>
      <!-- 主信息板 -->
      <div class="main-list-wrap">
        <el-tabs type="border-card" v-model="tabIndex">
          <el-tab-pane label="标段管理" name='1'>
            <el-table :data="arrayPolygon" style="width: 100%">
              <el-table-column prop="index" label="网格编号" width="100" align="center">
              </el-table-column>
              <el-table-column prop="name" label="网格区域名称" width="150" align="center">
              </el-table-column>
              <el-table-column prop="personnelCount" label="作业人员数量" width="150" align="center"> </el-table-column>
              <el-table-column prop="personnelName" label="作业人员姓名" width="150" align="center"> </el-table-column>
              <el-table-column prop="workTime" label="作业时间要求" width="150" align="center"> </el-table-column>
              <el-table-column label="操作" width="300" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    icon="el-icon-info"
                    @click="showRoadList(scope.$index, scope.row)"
                    >展示区域路段</el-button
                  >
            
                  <el-button
                    type="text"
                    icon="el-icon-info"
                    @click="showPersonnelList(scope.$index, scope.row)"
                    >展示区域人员</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="路段管理" name='2'>
            <el-table :data="arrayPolyline" style="width: 100%">
              <el-table-column prop="name" label="路段名称" width="100" align="center">
              </el-table-column>
              <el-table-column prop="personnelCount" label="作业人员数量" width="150" align="center"> </el-table-column>
              <el-table-column prop="personnelName" label="负责人员" width="150" align="center"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- <el-tab-pane label="人员管理" name='3'>
            <el-table :data="arrayPolyline" style="width: 100%">
              <el-table-column prop="date" label="日期" >
              </el-table-column>
              <el-table-column prop="name" label="姓名" >
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </el-tab-pane> -->
        </el-tabs>
      </div>
      <!-- 线段、标段 的 编辑展示数组 -->
      <div class="edit-poly-list-wrap" v-if="isShowTableForPoly">
        <div class="edit-poly-list">
          <!-- <h3>
            车辆实时在线统计
          </h3> -->
          
    <div>
      <el-row :gutter="20">
        <el-col :span="20" v-if="Manager">
          <el-form ref="form" :model="form">
            <el-form-item label="所属项目：" >
              <el-select v-model="person.item" placeholder>
                <el-option
                  v-for="item in person.itemList"
                  :key="item.CLIENT_NAME"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="20"  v-else> 
          <el-form ref="form" :model="form">
            <el-form-item label="所属标段：">
              <el-select v-model="person.team" placeholder>
                <el-option
                  v-for="item in person.teamList"
                  :key="item.CLIENT_NAME"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属班组：">
              <el-select v-model="person.client" placeholder>
                <el-option
                  v-for="item in person.clientList"
                  :key="item.CLIENT_NAME"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
          <div>
            <el-table
              :data="arrayPolyDataForEdit"
              class="card-table"
              style="width: 100%"
              height="394"
              size="mini"
              :header-cell-style="{ height: '40px' }"
              border
              fit
              highlight-current-row
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column
                prop="lng"
                label="经度"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="lat"
                label="纬度"
                align="center"
              ></el-table-column>
              
            </el-table>
          </div>
        </div>
        <div
          style="
            position: absolute,
            bottom: 10px;
            left: 0px;
            right: 0px;
            text-align: center;
          "
        >
          <el-button
            style="width: 180px"
            type="primary"
            @click="tableForPolySave"
            >保 存</el-button
          >
          <el-button style="width: 180px" @click="tableForPolyCancle"
            >取 消</el-button
          >
        </div>
        <!-- 面板切换选项卡 -->
        <!-- <div class="info-tabs">
        <a
          v-for="(item, index) in mapInfoTabs"
          :class="{ active: mapInfoTabValue === index }"
          :key="index"
          @click="changeMapInfoTabValue(index)"
        >
          <i :class="item.icon"></i>
        </a>
      </div> -->
      </div>
      <!-- 线段、标段 的 开启按钮 -->
      <div class="map-operation">
        <ul>
          <li
            v-for="(item, index) in operationsList"
            :class="{ active: item.active }"
            :key="index"
            @click="changeOperationValue(item, index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import MapStr from '@/main.js'
import eventBus from '@/eventBus.js'
import { newMap } from '@/common/js/map.js'
import { formatDate } from '@/common/js/date.js'
// import closeBtnImg from '@/assets/define.png'
import { color } from 'echarts'
// import imgMarkerRubbishPoint from '@/assets/marker/rubbishMarker1.png'
export default {
  data () {
    return {
      map: null,
      mapCursor: null,
      mapZoom: 15,
      isZoomChange: 'S',
      tabIndex:'1',
      operationsList: [ {
        name: '新建标段',
        icon: 'el-icon-truck',
        active: false
      }, {
        name: '新建路段',
        icon: 'el-icon-truck',
        active: false
      },{
        name: '测距',
        icon: 'el-icon-knife-fork',
        active: false
      }],
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {}
      },
      person: {
        name: '',
        client: '',
        clientList: [{"CLIENT_NAME":"丰年班组","CLIENT_NO":"1"},{"CLIENT_NAME":"高新区班组","CLIENT_NO":"2"},{"CLIENT_NAME":"华明园内一班组","CLIENT_NO":"3"},{"CLIENT_NAME":"华明园内二班组","CLIENT_NO":"4"}],
        team: '',
        teamList: [{"CLIENT_NAME":"一标","CLIENT_NO":"1"},{"CLIENT_NAME":"二标","CLIENT_NO":"2"},{"CLIENT_NAME":"三标","CLIENT_NO":"3"},{"CLIENT_NAME":"四标","CLIENT_NO":"4"}],
        item: '',
        itemList: [{"CLIENT_NAME":"东丽东片区","CLIENT_NO":"000000901"},{"CLIENT_NAME":"博德尔公司","CLIENT_NO":"00000090102"}]
      },
      mapDrawingPolygon: null,
      mapDrawingPolyLine: null,
      arrayPolyDataForEdit: [],
      arrayPolyline: [],
      arrayPolygon: [],
      mapClickForPolyLine: null,
      isShowTableForPoly: false,
      Manager: false,

    }
  },
  mounted () {
    // 显示地图
    this.mapShow()
    this.getPolygonList()
  },
  methods: {
    getPolygonList () {
      this.arrayPolygon = [{index:'89',name:'一标',personnelCount:'12',personnelName:'单明贤',workTime:'07:00 - 17:00',area:[{lng: '117.2351337661583', lat:'39.16890437825147'},
      {lng: '117.22399477783458', lat:'39.1612956044761'},
      {lng: '117.23182800188158', lat:'39.15390982465369'},
      {lng: '117.2353493594807', lat:'39.156203976315645'}]},
      {index:'90',name:'二标',personnelCount:'6',personnelName:'刘悦',workTime:'07:00 - 17:00',area:[{lng: '117.22392740492133', lat:'39.161113767010114'},
      {lng: '117.22187926835858', lat:'39.15968702583259'},
      {lng: '117.22191520057898', lat:'39.158791800788094'},
      {lng: '117.22231045500337', lat:'39.1577007297377'},
      {lng: '117.22256198054616', lat:'39.157197152730305'},
      {lng: '117.22791588138563', lat:'39.151489692695534'},
      {lng: '117.23161690008673', lat:'39.153979769416395'}]},
      {index:'91',name:'三标',personnelCount:'6',personnelName:'刘悦',workTime:'07:00 - 17:00',area:[{lng: '117.22786198305502', lat:'39.15146171380074'},
      {lng: '117.23407825718408', lat:'39.145054251562115'},
      {lng: '117.24178571845968', lat:'39.147950273485726'},
      {lng: '117.24210910844327', lat:'39.14842593709803'},
      {lng: '117.24192944734128', lat:'39.15077622737538'},
      {lng: '117.2412826673741', lat:'39.15634386117286'},
      {lng: '117.23614435985702', lat:'39.15634386117286'},
      {lng: '117.23485079992265', lat:'39.15598015996093'}]},
      {index:'92',name:'四标',personnelCount:'6',personnelName:'刘悦',workTime:'07:00 - 17:00',area:[{lng: '117.24139046403529', lat:'39.164890294023316'},
      {lng: '117.24153419291689', lat:'39.15652571106807'},
      {lng: '117.24232470176567', lat:'39.14885962756698'},
      {lng: '117.24271995619006', lat:'39.148439927155195'},
      {lng: '117.25069690911867', lat:'39.148775687686474'},
      {lng: '117.2574162343333', lat:'39.149615081949555'},
      {lng: '117.25651792882333', lat:'39.15593819431451'},
      {lng: '117.25256538457943', lat:'39.156106056748776'}]},]


        this.arrayPolygon.forEach(plan => {
          var pointsTurf = []
          var points = []
          // if (plan.area.length > 3) {
          //   plan.area.forEach(point => {
          //     pointsTurf.push(turf.point([point.lng, point.lat]))
          //   })
          //   // 凸包点位数据，生成多边形顶点，矫正顶点顺序
          //   var hull = turf.convex(turf.featureCollection(pointsTurf))
          //   // console.log(hull);

          //   hull.geometry.coordinates[0].forEach(element => {
          //     points.push(new BMap.Point(element[0], element[1]))
          //     // points.push([element[0], element[1]])
          //   })
          // } else {
            plan.area.forEach(point => {
              points.push(new BMap.Point(point.lng, point.lat))
              // points.push([point.lng, point.lat])
            })
          // }
          var polygon = new BMap.Polygon(points, {
            strokeColor: 'rgba(58, 107, 219, 1)',
            strokeWeight: 3,
            strokeStyle: 'dashed',
            fillColor: 'rgba(255, 255, 255, 0.65)'
          })
          polygon.ID = plan.index
          const _this = this
          // polygon.addEventListener('dblclick', function (oEvent) {
          //   _this.planID = this.ID
          //   // _this.MouseEvent.left = oEvent.clientX
          //   // _this.MouseEvent.top = oEvent.clientY
          //   // _this.MouseEvent.isShow = true

          //   // console.log(this.ID)
          //   _this.editOverlay(this)
          // })
          // polygon.addEventListener("mouseout", function (oEvent) {
          //   _this.MouseEvent.isShow = false;
          // });
          this.map.addOverlay(polygon)
          // this.polygonPlannedRoute.push(polygon)
        })
      
    },
    showRoadList () {
      this.tabIndex = '2'
      this.arrayPolyline = [{index:'89',name:'路段1',personnelCount:'2',personnelName:'单明贤、周敦利',workTime:'07:00 - 17:00',area:[{lng: '117.22219367528707', lat:'39.159879357839515'},
      {lng: '117.22530181235159', lat:'39.15682995887166'},
      {lng: '117.22720622003274', lat:'39.1580329486907'},
      {lng: '117.22844588163652', lat:'39.15689990070798'},
      {lng: '117.22815842387332', lat:'39.1566481097692'},
      {lng: '117.22797876277133', lat:'39.15678799373622'},
      {lng: '117.22666723672675', lat:'39.1559906513686'},
      {lng: '117.22769130500814', lat:'39.155067401457245'},
      {lng: '117.22884113606091', lat:'39.15587874293889'},
      {lng: '117.22814045776312', lat:'39.15655019082547'}]},
      {index:'90',name:'路段2',personnelCount:'1',personnelName:'何树成',workTime:'07:00 - 17:00',area:[{lng: '117.22876927162011', lat:'39.15604660551614'},
      {lng: '117.2290926616037', lat:'39.15627042165777'},
      {lng: '117.22963164490969', lat:'39.15580880007921'},
      {lng: '117.22776316944893', lat:'39.15461976074034'},
      {lng: '117.22603842286978', lat:'39.153542613499496'},
      {lng: '117.22593062620858', lat:'39.153654525674966'},
      {lng: '117.22754757612654', lat:'39.15468970479161'},
      {lng: '117.2253916429026', lat:'39.15676001696526'},
      {lng: '117.2248706257068', lat:'39.15634036405484'},
      {lng: '117.224888591817', lat:'39.15613053665337'},
      {lng: '117.22425977796001', lat:'39.15554301657316'}]},
      {index:'91',name:'路段3',personnelCount:'1',personnelName:'井忠彦',workTime:'07:00 - 17:00',area:[{lng: '117.22932622103629', lat:'39.155193299891586'},
      {lng: '117.22963164490969', lat:'39.1549275140416'},
      {lng: '117.22977537379128', lat:'39.15513734505991'},
      {lng: '117.22954181435868', lat:'39.15533318677449'},
      {lng: '117.2290926616037', lat:'39.155067401457245'},
      {lng: '117.22957774657908', lat:'39.15459178310021'},
      {lng: '117.22844588163652', lat:'39.153878349487606'},
      {lng: '117.22779910166933', lat:'39.154493861271426'}]},
      {index:'92',name:'路段4',personnelCount:'2',personnelName:'赵宝祥、孙家保',workTime:'07:00 - 17:00',area:[{lng: '117.22855367829771', lat:'39.153794415641975'},
      {lng: '117.22964961101988', lat:'39.15277321243576'},
      {lng: '117.23074554374206', lat:'39.15350064638744'},
      {lng: '117.22968554324028', lat:'39.154409928165975'}]},]
      var boundPoints = []
this.arrayPolyline.forEach(plan => {
          var pointsTurf = []
          var points = []
         
            plan.area.forEach(point => {
              points.push(new BMap.Point(point.lng, point.lat))
              boundPoints.push(new BMap.Point(point.lng, point.lat))
              // points.push([point.lng, point.lat])
            })
          var polyline = new BMap.Polyline(points, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5
    });
          this.map.addOverlay(polyline)
          // this.polygonPlannedRoute.push(polygon)
        })
        

boundPoints.push(new BMap.Point('117.24235165093084', '39.15609578011547'))
      this.map.setViewport(boundPoints);
    },
    showPersonnelList () {
      // this.tabIndex = '3'
      this.$router.push({
          path: '/SettingRoad'
        })
    },
    tableForPolySave () {
      console.log(this.arrayPolyDataForEdit)
      this.isShowTableForPoly = false
    },
    tableForPolyCancle () {
      console.log(this.arrayPolyDataForEdit)
      this.isShowTableForPoly = false
      this.arrayPolyDataForEdit = []
    },
    // 当多边形完成编辑时触发，计算点位与多边形重合范围
    isPointInPolygon (overlay) {
      console.log(overlay)
      //   this.arrPointIn = []

      //   this.dataRubbishPoints[0].forEach(element => {
      //     var result = BMapLib.GeoUtils.isPointInPolygon(new BMap.Point(element.LONGITUDE, element.LATITUDE), overlay);
      //     if (result) {
      //       element.PointID = element.ID;
      //       element.PointName = element.NAME;
      //       element.Stime = '05:00';
      //       element.Etime = '23:00';
      //       element.Wtime = '100';
      //       element.LONGITUDE = element.LONGITUDE_GPS;
      //       element.LATITUDE = element.LATITUDE_GPS;
      //       this.arrPointIn.push(element)
      //     }
      //   });
      //   if (overlay.ID) {
      //     var itemPlan = this.dataPlannedRoute.filter(item => item.ID === overlay.ID)[0]
      //     this.dataRubbishPoints[1].forEach(element => {
      //       var result = BMapLib.GeoUtils.isPointInPolygon(new BMap.Point(element.LONGITUDE, element.LATITUDE), overlay);
      //       if (result) {
      //         var arrayPoint = itemPlan.PlanLinePoints.filter(itemPoint => itemPoint.PointID === element.ID.toString())

      //         if (arrayPoint.length > 0) {
      //           arrayPoint[0].LONGITUDE = element.LONGITUDE_GPS
      //           arrayPoint[0].LATITUDE = element.LATITUDE_GPS
      //           this.arrPointIn.push(arrayPoint[0])
      //         }
      //       }
      //     });
      //     eventBus.$emit('getPointsFromMap', { plan: itemPlan, arrayPointIn: this.arrPointIn })
      //   } else {
      //     eventBus.$emit('getPointsFromMap', { plan: {}, arrayPointIn: this.arrPointIn })
      //   }
    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = newMap()
      this.map.centerAndZoom(new BMap.Point(117.227853, 39.163488), this.mapZoom)// 初始化地图,设置中心点坐标和地图级别
      // this.map.disableDoubleClickZoom();

      // 缩放屏幕
      //   const _this = this;
      //   this.map.addEventListener('zoomend', function (e) {
      //     // console.log("地图缩放至：" + this.getZoom() + "级");
      //     // var aa = e.target.getZoom();
      //     if (e.target.getZoom() > 13 && _this.isZoomChange === 'S') {
      //       _this.isZoomChange = 'B';
      //       for (var key in _this.MapV.textLayerDic) {
      //         _this.MapV.textLayerDic[key].show();
      //       }
      //       _this.drawRubbishPoints()
      //     }
      //     if (e.target.getZoom() < 14 && _this.isZoomChange === 'B') {
      //       _this.isZoomChange = 'S';
      //       for (var key1 in _this.MapV.textLayerDic) {
      //         _this.MapV.textLayerDic[key1].hide();
      //       }
      //       _this.drawRubbishPoints()
      //     }
      //   });

      // var pointList = [{ lng: 117.2288770682813, lat: 39.16615258756437 },
      // { lng: 117.22787096611013, lat: 39.16525045212667 },
      // { lng: 117.2291375768792, lat: 39.1652574454695 },
      // { lng: 117.23038622153807, lat: 39.16630643895531 },
      // { lng: 117.22969452629539, lat: 39.16708967713987 },
      // { lng: 117.23196723923563, lat: 39.16702673868209 },
      // { lng: 117.23205706978662, lat: 39.16622252005685 },
      // { lng: 117.22425977796001, lat: 39.16364895815847 },
      // { lng: 117.22427774407022, lat: 39.162760777535134 },
      // { lng: 117.22614621953097, lat: 39.16251600136036 },
      // { lng: 117.22700859282055, lat: 39.16180964244176 },
      // { lng: 117.22901181410779, lat: 39.162704828770885 }]

      // for (let i = 0; i < pointList.length; i++) {
      //   const pt = new BMap.Point(pointList[i].lng, pointList[i].lat)
      //   this.map.addOverlay(this.returnLabel(pt, i + 95))
      // }
    },
    returnLabel (pt) {
      var opts = {
        position: pt, // 指定文本标注所在的地理位置
        offset: new BMap.Size(-5, -5) // 设置文本偏移量
      }
      // 创建文本标注对象
      var label = new BMap.Label(' ', opts)
      label.setStyle({
        borderColor: 'red',
        borderWidth: '2px',
        height: '5px',
        width: '5px',
        borderRadius: '5px'
      })
      this.map.addOverlay(label)
    },
    returnLabel1 (pt, i) {
      var opts = {
        position: pt, // 指定文本标注所在的地理位置
        offset: new BMap.Size(-100, 30) // 设置文本偏移量
      }
      // 创建文本标注对象
      var label = new BMap.Label(i, opts)
      // 自定义文本标注样式
      label.setStyle({
        color: 'blue',

        borderColor: '#ccc',
        padding: '8px',
        fontSize: '16px',
        height: '20px',
        width: '20px',
        borderRadius: '20px',
        fontFamily: '微软雅黑'
      })
      return label
    },
    // marker上画label
    returnMarkerAddLabel (pt, i) {
      const marker = new BMap.Marker(pt)// 创建标注
      var offsetSize = new BMap.Size(0, 0)
      var labelStyle = {
        color: '#fff',
        backgroundColor: '0.05',
        border: '0'
      }

      // 不同数字长度需要设置不同的样式。
      switch ((i + '').length) {
        case 1:
          labelStyle.fontSize = '14px'
          offsetSize = new BMap.Size(4, 2)
          break
        case 2:
          labelStyle.fontSize = '12px'
          offsetSize = new BMap.Size(2, 4)
          break
        case 3:
          labelStyle.fontSize = '10px'
          offsetSize = new BMap.Size(-2, 4)
          break
        default:
          break
      }

      var label = new BMap.Label(i, {
        offset: offsetSize
      })
      label.setStyle(labelStyle)
      marker.setLabel(label)
      return marker
    },
    // 改变右上方显示隐藏图标
    changeOperationValue (item, index) {
      switch (index) {
        case 0:
          this.setDrawingPolygonManager()
          this.Manager = true
          break
        case 1:
          this.setDrawingPolyLineManager()
          this.Manager = false
          break
        case 2:
          this.setDistance()
          break
      }
    },
    // 测距
    setDistance () {
      if (!this.mapCursor) {
        this.mapCursor = new BMapLib.DistanceTool(this.map)
      }
      if (this.mapCursor.isOpen) {
        // 结束测量
        this.mapCursor.close()
      } else {
        // 开始测量
        this.mapCursor.open()
      }
    },
    // 画路线
    setDrawingPolyLineManager () {
      // 首先关闭上次绘画
      if (this.mapDrawingPolygon) {
        // 结束画图
        this.mapDrawingPolygon.close()
      }

      // 显示经纬度表
        this.isShowTableForPoly = true

      // 电子围栏 初始化
      if (!this.mapDrawingPolyLine) {
        // 实例化绘图工具
        this.mapDrawingPolyLine = new BMapLib.DrawingManager(this.map, {
          // enableDrawingTool: true,//工具栏
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 5)
          }
        })

        

        // 设置绘制模式为绘制路线
        this.mapDrawingPolyLine.setDrawingMode('polyline')
        // 开始测距
        // this.mapDrawingPolyLine.enableCalculate();

        const _this = this
        // 监听绘制结果
        this.mapDrawingPolyLine.addEventListener('polylinecomplete', function (e, overlay) {
          // console.log(overlay)
          // 为线段覆盖物添加点击方法，点击后编辑此覆盖物。
          overlay.addEventListener('click', function (e) {
            // this.ID = null;
            _this.editPolygon(this)
          })
          _this.arrayPolyDataForEdit = overlay.getPath()
          // 本地自定义 线段编辑器关闭方法
          _this.closePolyLineManager()
        })

        this.mapClickForPolyLine = function (e) {
          _this.arrayPolyDataForEdit.push({ lng: e.point.lng, lat: e.point.lat })

          // _this.returnLabel(e.point) // 画红点折点标记
        }
      }
      if (this.mapDrawingPolyLine.isOpen) {
        // 结束画图
        this.closePolyLineManager()
      } else {
        // 开始画图
        this.mapDrawingPolyLine.open()
        const _this = this
        this.map.addEventListener('click', this.mapClickForPolyLine
          // function (e, overlay) {
          //   _this.arrayPolyDataForEdit.push({ lng: e.point.lng, lat: e.point.lat })
          //   console.log(e.point)
          //   // console.log(overlay)
          //   _this.returnLabel(e.point)
          // }
        )
      }
    },
    closePolyLineManager () {
      this.mapDrawingPolyLine.close()
      // this.map.removeEventListener("click", showInfo);
      this.map.removeEventListener('click', this.mapClickForPolyLine)
    },
    // 划分片区
    setDrawingPolygonManager () {
      if (this.mapDrawingPolyLine) {
        // 结束画图
        this.closePolyLineManager()
      }
      // 显示经纬度表
        this.isShowTableForPoly = true
      // 电子围栏 初始化
      if (!this.mapDrawingPolygon) {
        // 实例化绘图工具
        this.mapDrawingPolygon = new BMapLib.DrawingManager(this.map, {
          // enableDrawingTool: true,//工具栏
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 5)
          }
        })

        

        // 设置绘制模式为绘制多边形
        this.mapDrawingPolygon.setDrawingMode('polygon')

        const _this = this
        // 监听绘制结果
        this.mapDrawingPolygon.addEventListener('polygoncomplete', function (e, overlay) {
          // this.mapDrawingPolygon.addEventListener('overlaycomplete', res => {
          overlay.getPath()
          overlay.addEventListener('click', function (e) {
            // this.ID = null;
            _this.editPolygon(this)
          })
          _this.arrayPolyDataForEdit = overlay.getPath()
        })
      }
      if (this.mapDrawingPolygon.isOpen) {
        // 结束画图
        this.mapDrawingPolygon.close()
      } else {
        // 开始画图
        this.mapDrawingPolygon.open()
      }
    },
    // 编辑多边形
    editPolyLine (overlay) {
      overlay.enableEditing()
    },
    // 编辑多边形
    editPolygon (overlay) {
      const _this = this

      // 显示经纬度表
      this.isShowTableForPoly = true

      overlay.enableEditing() // 设置电子围栏可编辑
      // 覆盖物添加监听事件，监听覆盖物编辑情况
      overlay.addEventListener('lineupdate', function (r) {
        _this.arrayPolyDataForEdit = this.getPath()
      })

      var m = new BMap.Icon(closeBtnImg, new BMap.Size(40, 40))
      var closeBtn = new BMap.Marker(overlay.getBounds().getNorthEast(), { icon: m, offset: new BMap.Size(0, -15) })
      this.map.addOverlay(closeBtn)

      closeBtn.addEventListener('click', function (r) {
        overlay.disableEditing()
        console.log(overlay.getPath())
        _this.arrayPolyDataForEdit = overlay.getPath()
        // 当多边形完成编辑时触发，计算点位与多边形重合范围
        // _this.isPointInPolygon(overlay);
        _this.map.removeOverlay(this)
      })
    }
  }
}
</script>

<style scoped lang="less">
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .container {
    flex: 1;
    #map {
      height: 100% !important;
      // height: 800px;
      width: 100%;
    }
  }
}
.map-operation {
  position: absolute;
  right: 20px;
  top: 10%;
  background: rgba(255, 255, 255, 0.9);
  // border: 1px solid #dcdfe6;
  box-shadow: 1px 1px 5px #666;
  border-radius: 3px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #666;
      font-size: 15px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      i {
        margin-right: 3px;
        // font-size: 14px;
        // &:before {
        //   font-size: inherit;
        //   color: inherit;
        // }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      // &:last-child {
      //   &::before {
      //     display: none;
      //   }
      // }
      // &.active {
      //   color: #007acc;
      // }
    }
  }
}
.edit-poly-list-wrap {
  position: absolute;
  left: 20px;
  top: 10%;
  height: 510px;
  .edit-poly-list {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 400px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}
.main-list-wrap {
  position: absolute;
  right: 20px;
  bottom: 11%;
  height: 300px;
  .main-list {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 700px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}
</style>
